<!-- 文件管理 -->
<template>
	<div class="systemFilesAdmin" v-loading="systemFilesLoading">
		<div class="title">文件管理</div>
    <div class="searchBox">
      <el-form inline ref="searchForm" :model="searchForm" :rules="searchFormRules" label-width="80px" size="mini">
        <el-form-item label="文件类型" prop="type">
          <el-select v-model="searchForm.type" placeholder="文件类型" @change="selTypeChange">
            <el-option v-for="(item, index) of filesType" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>


        <el-row>
          <el-form-item label="水站名称" prop="station">
            <!-- <el-input v-model="searchForm.station" placeholder="水站名称"></el-input> -->
            <el-select v-model="searchForm.station" placeholder="请选择水站名称" @change="selStationChange" :disabled="stationIsFlag">
              <p v-for="(item, index) of stationInstrument" :key="index">
                <el-option :label="item.station" :value="item.station"></el-option>
              </p>
            </el-select>
          </el-form-item>
          <el-form-item label="相关仪器名称" prop="instrumentName" label-width="120px">
            <el-select v-model="searchForm.instrumentName" placeholder="相关仪器名称" :disabled="instrumentIsFlag">
              <p v-for="(item, index) of curInstrumentList" :key="index">
                <el-option :label="item" :value="item"></el-option>
              </p>
            </el-select>
          </el-form-item>
        </el-row>
        
        
        <el-row class="uploadBox">
          <el-form-item label="文件上传" prop="filesList">
            <el-upload
              ref="uploadPhoto"
              drag
              action=""
              :file-list="searchForm.filesList"
              :on-change="uploadChange"
              :http-request="handleSubmit"
              :auto-upload="false"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-form-item style="margin-left: 65px;">
          <el-button type="primary" @click="onSubmit" class="greenBtn">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import common from '@/plugins/common'
export default {
  name: 'systemFilesAdmin',
  data () {
    return {
      msg: 'hello systemFilesAdmin!',
      systemFilesLoading: false,
      formData: '',
      stationIsFlag: false,
      instrumentIsFlag: false,
      curInstrumentList: [],
      searchForm: {
        station: '',
        type: '',
        instrumentName: '',
        filesList: [],
      },
      searchFormRules: {
        type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        filesList: [
          { required: true, message: '请选择文件', trigger: 'change' }
        ],
      }
		}
  },
	methods: {
    ...mapActions([
      'fetchStationInstrument',
      'postSystemFiles'
    ]),
    onSubmit() {
      this.$refs['searchForm'].validate(async (valid) => {
        if(valid) {
          if(this.searchForm.filesList.length > 0) {
            this.systemFilesLoading = true
            this.formData = new FormData()
            this.$refs.uploadPhoto.submit()
            this.formData = common.formDataLoopAppen(this.formData, this.searchForm)
            let result = await this.postSystemFiles(this.formData)
            if(result.message !== 'success') {
              this.$notify.warning({
                title: '警告',
                message: result.info,
              })
            }else {
              this.$notify.success({
                title: '成功',
                message: '上传成功!',
              })
              //上传成功 清空表单
              this.formData = null
              this.$refs.searchForm.resetFields()
            }
            this.systemFilesLoading = false
          }else {
            this.$notify.warning({
              title: '警告',
              message: '最少上传1个文件',
            })
          }
        } else {
          return false;
        }
      })
      
      
    },

    uploadChange(file, fileList){
			this.searchForm.filesList = fileList
    },
    handleSubmit(response) {
			this.formData.append('files', response.file)
    },

    selTypeChange(val) {
      if(val === 'statute' || val === 'dayReport' || val === 'weekReport' || val === 'monthReport') {
        this.stationIsFlag = this.instrumentIsFlag = true
        this.searchForm.station = this.searchForm.instrumentName = ''
      }else {
        this.stationIsFlag = this.instrumentIsFlag = false
      }
    },
    selStationChange(val) {
      this.searchForm.instrumentName = ''
      let data = this.stationInstrument.find(v => v.station === val)
      if(data) {
        this.curInstrumentList = data.instrument
      }
    }
  },
  async created() {
    this.systemFilesLoading = true
    await this.fetchStationInstrument()
    this.systemFilesLoading = false
  },
  computed: {
    ...mapGetters({
      stationInstrument: 'getStationInstrument',
      filesType: 'getFilesType',
    })
  },
}
</script>
<style scoped>
.systemFilesAdmin {
  padding: 0 20px 0 20px;
  min-height: 100%;
  background: #fff;
}
.systemFilesAdmin .title {
  position: relative;
  color: #666;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}
.systemFilesAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.uploadBox {
  margin-top: 18px;
}
</style>